<template>
	<!-- <view class="container"> -->
	<view>

		<view class="search-param-time">
			<uni-row>
				<uni-col :span="6">
					<view class="search-param">
						<uni-data-select v-model="queryParams.release" :localdata="statusRange"
							style="background-color: #fff;" placeholder="放行状态" @change="search"></uni-data-select>
					</view>
				</uni-col>
				<uni-col :span="9">
					<view class="datetime-picker-container">
						<uni-datetime-picker v-model="queryParams.beginCheckinTime" type="date" placeholder="选择开始时间"
							@change="search"></uni-datetime-picker>
					</view>
				</uni-col>
				<uni-col :span="9">
					<view class="datetime-picker-container">
						<uni-datetime-picker v-model="queryParams.endCheckinTime" type="date" placeholder="选择结束时间"
							@change="search"></uni-datetime-picker>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<view class="search-param">
			<uni-search-bar placeholder="请输入车牌号" v-model="queryParams.plate" @confirm="search"
				@cancel="show"></uni-search-bar>
			<uni-search-bar placeholder="请输入调拨单号" v-model="queryParams.vbeln" @confirm="search"
				@cancel="show"></uni-search-bar>
		</view>

		<!-- <view class="search-results" v-if="SAPPlateInfoList.length > 0"> -->
		<view v-if="SAPPlateInfoList.length > 0" style="padding: 10px;">
			<view v-for="(SAPPlateInfo, index) in SAPPlateInfoList" :key="index" class="search-result-item">
				<uni-row class="result-row">
					<uni-col :span="13">
						<text class="label">车牌号：</text>
						<text class="value">{{ SAPPlateInfo.plate }}</text>
					</uni-col>
					<uni-col :span="6">
						<text
							:class="{'value-green': SAPPlateInfo.release === 'X', 'value-red': SAPPlateInfo.release !== 'X'}"
							class="value">
							{{ SAPPlateInfo.release === 'X' ? '允许放行' : '不允许放行' }}
						</text>
					</uni-col>
					<uni-col :span="5">
						<view>
							<button class="apply-button" @click="manualRelease(SAPPlateInfo)">同步</button>
						</view>
					</uni-col>
				</uni-row>
				<uni-row class="result-row">
					<uni-col :span="13">
						<view class="info-group">
							<text class="label">调拨单号：</text>
							<view style="display: flex;">
								<text class="value">{{ SAPPlateInfo.vbeln }}</text><text
									style="color: red;">{{(SAPPlateInfo.vsnmr_V === '6' ? '（YT）': SAPPlateInfo.vsnmr_V === '7' ? '（ZL）' : '')}}</text>
							</view>
							<text class="label">业务员工号：</text>
							<text class="value">{{ SAPPlateInfo.ihrez }}</text>
						</view>
					</uni-col>
					<uni-col :span="11">
						<view class="info-group">
							<text class="label">调拨单金额：</text>
							<text class="value">{{ SAPPlateInfo.amount }}</text>
							<text class="label">业务员姓名：</text>
							<text class="value">{{ SAPPlateInfo.bname }}</text>
						</view>
					</uni-col>
				</uni-row>
				<uni-row class="result-row">
					<uni-col :span="24">
						<view>
							<text class="label">订单号：</text>
							<text class="value">{{ SAPPlateInfo.vgbel }}</text>
						</view>
					</uni-col>
				</uni-row>
				<uni-row class="result-row">
					<uni-col :span="24">
						<view>
							<text class="label">送达方：</text>
							<text class="value">{{ SAPPlateInfo.name_WE }}</text>
						</view>
					</uni-col>
				</uni-row>
				<uni-row class="result-row">
					<uni-col :span="24">
						<view>
							<text class="label">售达方：</text>
							<text class="value">{{ SAPPlateInfo.name_AG }}</text>
						</view>
					</uni-col>
				</uni-row>
				<uni-row class="result-row">
					<uni-col :span="24">
						<view class="info-group">
							<text class="label">拒绝原因：</text>
							<text
								:class="{'value': SAPPlateInfo.release === 'X', 'value-red': SAPPlateInfo.release !== 'X'}"
								class="value">{{ SAPPlateInfo.reason || '无' }}</text>
						</view>
					</uni-col>
				</uni-row>
				<uni-row class="result-row">
					<uni-col :span="24">
						<text class="label">客户余额：</text>
						<text :class="{'value-red': SAPPlateInfo.zumsav < 0, 'value': SAPPlateInfo.zumsav >= 0}"
							class="value">{{ SAPPlateInfo.zumsav }}</text>
					</uni-col>
				</uni-row>
				<uni-row class="result-row">
					<uni-col :span="16">
						<text class="label">差额：</text>
						<text
							:class="{'value-red': SAPPlateInfo.amount_DIFF < 0, 'value': SAPPlateInfo.amount_DIFF >= 0}"
							class="value">{{ SAPPlateInfo.amount_DIFF }}</text>
					</uni-col>
					<uni-col :span="8">
						<!-- <view>
							<button class="release-credit-button"
								@click="vehicleReleaseCredit(SAPPlateInfo)">授信出门</button>
						</view> -->
						<view v-show="SAPPlateInfo.amount_DIFF < 0 && SAPPlateInfo.release !== 'X' ">
							<button class="release-credit-button"
								@click="vehicleReleaseCredit(SAPPlateInfo)">授信出门</button>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listSAPPlateInfo,
		manualRelease,
		vehicleReleaseCredit
	} from '@/api/tms/ecDeliverVehicle'

	export default {
		created() {
			this.initDateRange();
			const plate = this.$route.query.deliverVehicleNo;
			const vbeln = this.$route.query.sapOrderNo;
			if (plate && plate != 'null') {
				this.queryParams.plate = plate;
			}
			//如果有调拨单，直接用调拨单查询即可（车牌号可能有误）
			if (vbeln && vbeln != 'null') {
				this.queryParams.vbeln = vbeln;
				// 	this.queryParams.plate = "";
			}
			this.search();
		},
		data() {
			return {
				SAPPlateInfoList: [],
				queryParams: {
					plate: "",
					vbeln: "",
					beginCheckinTime: "",
					endCheckinTime: "",
					release: ""
				},
				statusRange: [{
						value: 1,
						text: "允许放行"
					},
					{
						value: 2,
						text: "不允许放行"
					}
				]
			};
		},
		methods: {
			/** 车辆授信出门 */
			vehicleReleaseCredit(row) {
				// 测试数据
				// const amount_DIFF = -0.9;
				// 显示确认对话框
				uni.showModal({
					title: '风险提示',
					content: '一旦确定客户将欠款出门，后续欠款需全权负责，是否继续授信出门？',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 用户点击确定后执行授信操作
							vehicleReleaseCredit({
								"sapOrderNo": row.vbeln,
								//测试数据
								// "currentDeduceCredit": amount_DIFF,
								"currentDeduceCredit": row.amount_DIFF,
								"plate": row.plate,
								"is_release": row.release,
								"reason": row.reason,
								"amount": row.amount,
								"nameWe": row.name_WE,
								"nameAg": row.name_AG,
								"ihrez": row.ihrez,
								"bname": row.bname,
								"vgbel": row.vgbel,
								"zumsav": row.zumsav,
								"amountDiff": row.amount_DIFF,
								"vbill": row.vbill,
								"kunWe": row.kunWe,
								"kunAg": row.kunAg
							}).then(response => {
								uni.showToast({
									title: row.vbeln + "授信成功！",
									icon: 'success'
								});
								this.getList();
							});
						} else if (res.cancel) {
							// 用户点击取消
							uni.showToast({
								title: "已取消授信操作",
								icon: 'none'
							});
						}
					}
				});
			},
			/** 同步SAP车辆放行信息 */
			manualRelease(row) {
				manualRelease({
					"vbeln": row.vbeln
				}).then(response => {
					this.$modal.msgSuccess("同步成功！");
					this.search();
				});
			},
			initDateRange() {
				// const fifteenDaysAgo = new Date();
				// fifteenDaysAgo.setDate(fifteenDaysAgo.getDate() - 3);
				this.queryParams.beginCheckinTime = new Date();
				this.queryParams.endCheckinTime = new Date();
			},
			search() {
				this.queryParams.params = {};
				if (this.queryParams.beginCheckinTime) {
					this.queryParams.params["beginCheckinTime"] = this.queryParams.beginCheckinTime;
				}
				if (this.queryParams.endCheckinTime) {
					this.queryParams.params["endCheckinTime"] = this.queryParams.endCheckinTime;
				}
				if (this.queryParams.beginCheckinTime && this.queryParams.endCheckinTime) {
					const start = new Date(this.queryParams.beginCheckinTime)
					const end = new Date(this.queryParams.endCheckinTime)
					const diffDays = (end - start) / (1000 * 60 * 60 * 24)
					if (diffDays > 7) {
						this.$modal.msgError('查询时间范围不能超过7天')
						this.loading = false
						return
					}
				}
				listSAPPlateInfo(this.queryParams).then(response => {
					var SAPPlateInfoList = response.rows;
					this.SAPPlateInfoList = SAPPlateInfoList;
				});

			},
			// show() {
			// 	this.initDateRange();
			// 	this.search();
			// },
			// onLoad() {
			// 	this.initDateRange();
			// 	this.search();
			// },
		},
	};
</script>

<style>
	.container {
		flex-direction: column;
		background-color: #fff;
		font-size: 16px;
		padding: 16px;
	}

	.search-param {
		margin-bottom: 2px;
	}

	.search-param-time {
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 2px;
	}

	.search-results {
		background-color: #f9f9f9;
		padding: 16px;
		border-radius: 8px;
	}

	.search-result-item {
		margin-bottom: 16px;
		padding: 16px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
	}

	.result-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.label {
		font-weight: bold;
		color: #333;
		min-width: 80px;
	}

	.value {
		color: #666;
	}

	.value-green {
		color: rgb(73, 221, 221);
	}

	.value-red {
		color: red;
	}

	.info-group {
		display: flex;
		flex-direction: column;
	}

	.info-group .label+.value {
		margin-top: 4px;
	}

	.apply-button {
		font-size: 15px;
		border: 1px solid orange;
		color: orange;
		margin-right: 7px;
		width: 80px;
		height: 26px;
		margin-top: 4px;
		margin-bottom: 4px;
		line-height: 26px;
		text-align: center;
	}

	.release-credit-button {
		font-size: 15px;
		border: 1px solid #00c851;
		color: #00c851;
		margin-right: 7px;
		width: 90px;
		height: 26px;
		margin-top: 4px;
		margin-bottom: 4px;
		line-height: 26px;
		text-align: center;
	}

	.datetime-picker-container {
		flex: 1;
		text-align: center;
		border-radius: 8px;
	}
</style>